<template>
  <div class="yanluao">
    <div class="weidao">
        <van-icon name="arrow-left" class="weidao1" @click="dianss"/>
        <div class="weidao2">【华硕好屏】a豆多彩笔记本_华硕商城</div>
        <van-icon name="ellipsis" class="weidao3" />
    </div>
    <div class="dwww">
        <div v-for="(v,index) in img" :key="index" class="tuopian">
            <img :src="v" alt="">
        </div>
    </div>
    <div>
        <div class="kaitou1"><img src="https://static.asus.com.cn/store/20221123/14470798559799.gif" alt=""></div>
        <div class="kaitou2">
            <div v-for="(v,index) in data1" :key="index" class="imhss">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
            </div>
        </div>
        <div class="kaitou1"><img src="https://static.asus.com.cn/store/20230202/15283110210149.jpg" alt=""></div>
        <div class="kaitou2">
            <div v-for="(v,index) in data2" :key="index" class="imhss">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
            </div>
        </div>
        <div class="kaitou1"><img src="https://static.asus.com.cn/store/20221123/14480250101539.png" alt=""></div>
        <div class="kaitou2">
            <div v-for="(v,index) in data3" :key="index" class="imhss">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
            </div>
        </div>
        <div class="kaitou1"><img src="https://static.asus.com.cn/store/20221123/14485897504899.gif" alt=""></div>
        <div class="kaitou2 imhss1">
            <div v-for="(v,index) in data4" :key="index" class="imhss">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
            </div>
        </div>
    </div>
    <div class="tuopian" @click="dianss"><img :src="img[7]" alt=""></div>
  </div>
</template>

<script>
export default {
    data(){
    return {
        data1:"",
        data2:"",
        data3:"",
        data4:"",
        img:"",
        title:""
    }
  },
  methods:{
    dianss(){
        this.$router.push("/shouye")
    }
  },
  mounted(){
      this.$http({
            url:"http://localhost:3000/navigation3",
            method:"get"
      }).then(res=>{
            this.data1 = res.data[0].data.data1;
            this.data2 = res.data[0].data.data2;
            this.data3 = res.data[0].data.data3;
            this.data4 = res.data[0].data.data4;
            this.img = res.data[0].data.img;   
            console.log(this.img);        
      })  
  }
}
</script>

<style scoped>
.weidao1{
    font-size: 7vw;
    margin: 3vw 2vw 2vw 2vw;
}
.weidao2{
    flex-grow: 1;
    text-align: center;
    line-height: 13vw;
}
.weidao3{
    font-size: 7vw;
    margin: 3vw 2vw 2vw 2vw;
}
.weidao{
    display: flex;
    width: 100vw;
    height: 13vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #e8e8e8;
}
.tuopian img{
    width: 94vw;
    margin: 3vw;
    border-radius: 10px;
}
.dwww{
    margin-top: 13vw;
}
.imhss1{
    flex-wrap: wrap;
}
.yanluao{
    background-color: rgb(254, 238, 240);   
}
.zengp{
    width: 10vw;
    border: 1px solid #F5A623;
    color: #F5A623;
    padding: 0.5vw;
    border-radius: 8px;
    text-align: center;
    font-size: 3vw
}
.imhss p:nth-child(2){
    font-size: 4vw;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imhss p:nth-child(3){
    font-size: 3vw;
    opacity: 0.5;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imhss p:nth-child(5){
    font-size: 4vw;
    color: coral;
}
.imhss p:nth-child(6){
    font-size: 2vw;
    opacity: 0.5;
    text-decoration: line-through;
}
.imhss img{
    width: 26vw;
}
.imhss{
    width: 26vw;
    margin-left: 2vw;
    padding: 1.5vw;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 2vw;
}
.kaitou1 img{
    width: 94vw;
    margin: 3vw;
    border-radius: 10px;
}
.kaitou2{
    width: 94vw;
    margin: 3vw;
    border-radius: 10px;
    display: flex;
}
</style>